<template>
  <div>
    <!-- 搜索部分 -->
    <div class="search-box">
      <slot name="search" />
      <el-button icon="el-icon-search" type="primary" @click="searchFn">
        搜索
      </el-button>
    </div>
    <!-- 表格和分页部分 -->
    <div
      class="1"
      v-loading="tableLoading"
      element-loading-spinner="el-icon-loading"
      element-loading-text="努力加载中..."
    >
      <slot name="table" />
      <pagination
        background
        :pageInfo="pageInfo"
        @currentChange="currentChange"
      />
    </div>
  </div>
</template>

<script>
import pagination from "./pagination";
export default {
  components: {
    pagination
  },
  props: {
    // 搜索内容
    showSearch: {
      type: Object,
      default: () => {}
    },
    // 请求地址
    listApi: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      tableLoading: false,
      sureSearch: {}, // 真实传递的搜索内容
      pageInfo: {
        page: 1,
        limit: 15,
        total: 0
      }
    };
  },
  created() {
    this.searchFn();
  },
  methods: {
    // 获取列表
    getList() {
      this.tableLoading = true;
      setTimeout(() => {
        const tableData = new Array(this.pageInfo.limit).fill({}).map(() => {
          return {
            id: Math.random(),
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄上海市普陀区金沙江路 151区"
          };
        });
        const res = {
          data: {
            list: tableData,
            total: 100
          }
        };
        this.pageInfo.total = 100;
        this.tableLoading = false;
        this.$emit("returnRes", res.data);
      }, 1000);
    },
    // 删除接口成功后的操作 tableData:执行删除的表格数组 num:被删除的条数
    afterDelete(tableData, num = 1) {
      this.$message({ type: "success", message: "删除成功" });
      if (this.pageInfo.page > 1 && num === tableData.length) {
        this.pageInfo.page--;
      }
      this.getList();
    },
    // 搜索
    searchFn() {
      this.sureSearch = JSON.parse(JSON.stringify(this.showSearch));
      this.pageInfo.page = 1;
      this.getList();
    },
    // 翻页
    currentChange(val) {
      this.pageInfo.page = val;
      this.getList();
    }
  }
};
</script>

<style lang="scss">
// 搜索
.search-box {
  margin-bottom: 20px;
  // 文本框
  .el-input {
    width: 400px;
    margin-right: 20px;
  }
  // 下拉框
  .el-select {
    width: 200px;
    margin-right: 20px;
    .el-input {
      width: 100%;
    }
  }
  // 时间框
  .el-date-editor {
    width: 200px;
    margin-right: 20px;
    .el-input {
      width: 100%;
    }
  }
}
</style>
